<template>
  <div>
    <!-- banner轮播 -->
    <div
      class="diy-banner fade-show"
      :style="{
        padding: diyItem.style.pt + 'px ' + diyItem.style.pl + 'px',
        background: diyItem.style.bg_status == '1' ? diyItem.style.bg : 'none',
      }"
    >
      <div
        class="diy-banner-box"
        :class="diyItem.style.shade == 1 ? 'diy-style-shade' : ''"
        :style="{
          borderRadius: diyItem.style.radius + 'px',
          height: imgHeights[imgCurrent] + 'px',
        }"
      >
        <swiper
          :autoplay="autoplay"
          class="diy-banner-swiper-box fade-show"
          :duration="duration"
          :circular="true"
          @change="_bindChange"
          :style="{ height: imgHeights[imgCurrent] + 'px' }"
        >
          <swiper-item v-for="(item, index) in diyItem.data" :key="index">
            <image
              mode="widthFix"
              class="diy-banner-slide-image fade-show"
              @load="imageLoad"
              :src="item.img"
              :data-id="index"
              :style="{ height: imgHeights[imgCurrent] + 'px' }"
            />
          </swiper-item>
        </swiper>
        <div class="diy-banner-dots">
          <div
            class="diy-banner-dot"
            v-for="(item, index) in diyItem.data"
            :key="index"
            :style="{
              width: index == imgCurrent ? '10px' : '',
              background: index == imgCurrent ? diyTheme?.host_bg : '',
            }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "DiyBanner",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance, onMounted, nextTick } from "vue";
import { diyBannerDataType, diyThemeDataType } from "@/types";
import { configStore } from "@/store";

const diyTheme = ref<diyThemeDataType>();

const props = withDefaults(
  defineProps<{
    diyItem: diyBannerDataType;
  }>(),
  {
    diyItem: () => {
      return {
        style: {
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          radius: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: [],
      };
    },
  }
);

const imgHeights = ref<number[]>([]);

const imgWidths = ref<number[]>([]);
//当前指针
const imgCurrent = ref<number>(0);

const indicatorDots = ref<boolean>(true);

const autoplay = ref<boolean>(true);

const duration = ref<number>(800);
/**
 * 计算图片高度
 */
const imageLoad = (e: any) => {
  // 获取图片真实宽度
  let imgwidth = e.detail.width,
    imgheight = e.detail.height,
    // 宽高比
    ratio = imgwidth / imgheight;
  // 计算的高度值
  const res = uni.getSystemInfoSync();
  let viewH = (res.windowWidth - Number(props.diyItem.style.pl) * 2) / ratio,
    viewW = viewH * ratio;
  // 把每一张图片的高度记录到数组里
  imgHeights.value.push(viewH);
  imgWidths.value.push(viewW);
};

/**
 * 记录当前指针
 */
const _bindChange = (e: any) => {
  imgCurrent.value = e.detail.current;
};

onMounted(() => {
  nextTick(() => {
    diyTheme.value = configStore().getDiyTheme;
  });
});
</script>

<style scoped>
/* banner轮播 */

.diy-banner {
  position: relative;
  background: #fff;
}

.diy-banner .diy-banner-image {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.diy-banner .diy-banner-slide-image {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
}
.diy-banner .diy-banner-box {
  position: relative;
  overflow: hidden;
}
.diy-banner-swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 2rpx;
}

/* banner组件按钮 */
.diy-banner .diy-banner-dots {
  position: absolute;
  width: 120px;
  bottom: 12px;
  right: calc(50% - 60px);
  display: flex;
  justify-content: center;
}
.diy-banner .diy-banner-dots .diy-banner-dot {
  margin: 0 8rpx;
  width: 5px;
  height: 5px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  transition: all 0.3s;
}
.diy-banner .diy-banner-dots .diy-banner-dot.active {
  width: 10px;
  background: var(--default);
}
</style>